<!-- ？？？ -->


<template>
  <div style="display: flex; justify-content: space-between;margin-top: 80px;margin-bottom: 100px ;padding-left: 40px; padding-right: 40px;">

    <div style="width: 50%;background-color: whitesmoke;">
      <el-form ref="form" :model="form" label-width="80px" >
        <el-form-item label="作者" style="margin-top: 15px;margin-right: 10px">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="生成主题">
          <el-select v-model="form.theme" placeholder="请选择主题">
            <el-option label="自动，随机主题" value="auto"></el-option>
            <el-option label="紫色主题" value="purple"></el-option>
            <el-option label="绿色主题" value="green"></el-option>
            <el-option label="清逸天蓝" value="lightblue"></el-option>
            <el-option label="质感之境" value="taupe"></el-option>
            <el-option label="星光夜影" value="blue"></el-option>
            <el-option label="炽热暖阳" value="telecomRed"></el-option>
            <el-option label="幻翠奇旅" value="telecomGreen"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="生成类型">
          <el-radio-group v-model="form.create_model">
            <el-radio label="auto" value="auto"></el-radio>
            <el-radio label="topic" value="topic"></el-radio>
            <el-radio label="text" value="text"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生成要求">
          <el-input type="textarea" v-model="form.query"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Tijiao">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: grid; grid-template-rows: auto auto;">
      <el-progress type="circle" :percentage="percentage" width="300"></el-progress>
      <a v-if="buttonVisible" :href="this.url" download>
        <el-button type="primary">
          下载<i class="el-icon-download el-icon--right"></i>
        </el-button>
      </a>


    </div>


  </div>
</template>
  <script>
    export default {
      data() {
        return {
         form: {
          author: '烫烫烫与锟斤拷团队',
          query: '',
          create_model: 'auto',
          theme: 'auto'
        },
        percentage: 0,
        buttonVisible: false,
        url:''
        }
      },
      mounted() {
        //this.increasePercentage();
    },
    methods: {
      Tijiao() {
    this.increasePercentage();
    console.log(this.form.query, this.form.create_model, this.form.theme, this.form.author);
    this.sendDataToServerppt();
  },
  increasePercentage() {
    const intervalId = setInterval(() => {
      if (this.percentage < 99) {
        this.percentage += 1;
      } else {
        clearInterval(intervalId);
      }
    }, 600); // 每隔30毫秒增加一次，你可以根据需要调整间隔时间
  },
  async sendDataToServerppt() {
  try {
    // 准备发送的数据
    const dataToSend = {
      query: this.form.query,
      create_model: this.form.create_model, // 表单
      theme: this.form.theme,
      author: this.form.author, // 表单
    };
    // 发送 POST 请求到端口 8081
    const response = await fetch('http://localhost:8081/ppt_create', {
      method: 'POST', // 注意这里改为 POST 请求
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(dataToSend)
    });

    // 解析服务器返回的响应数据
    const data = await response.json();

    console.log('从服务器接收到的信息：', data);
    if (data != null) {
      this.percentage=100;
      this.buttonVisible = true;
    }
    this.url = data.data;

  } catch (error) {
    // 处理错误
    console.error('发送数据时出错：', error);
  }
},


    }
  }
  </script>
  <style>
</style>
